<template>
  <div class="commentPage">
    <!-- 这里是头部组件 -->
    <Topnav titleTxt="我的跟帖"></Topnav>
    <!-- 这里是内容 -->
    <div class="CommentsList" v-for="(item,index) in CommentList" :key="index">
      <div class="item">
        <div class="date">
          {{item.create_date.split("T")[0]}}&nbsp;&nbsp;&nbsp;&nbsp;
          {{item.create_date.split("T")[1].slice(0,8)}}
        </div>
        <div class="parent" v-if="item.parent">
          <div class="nickname">回复：{{item.parent.user.nickname}}</div>
          <div class="comment">{{item.parent.content}}</div>
        </div>
        <div class="content">{{item.content}}</div>
        <div class="originPost">
          <div class="title">原文:{{item.post.title}}</div>
          <span class="iconfont iconjiantou1"></span>
        </div>
      </div>
    </div>
    <div class="moreComment" @click="loadMorePage($event)">更多跟帖>></div>
  </div>
</template>
<script>
// 引入头部组件
import Topnav from "@/components/TopNav.vue";
export default {
  components: {
    Topnav
  },
  data() {
    return {
      CommentList: []
    };
  },
  mounted() {
    this.loadCommentsList();
  },
  methods: {
    loadCommentsList() {
      this.$axios({
        url: "/user_comments",
        method: "GET"
      }).then(res => {
        console.log("这里是测试数据", res);
        const { data } = res.data;
        if (data.length > 3) {
          data.length = 3;
        }
        this.CommentList = data;
      });
    },
    loadMorePage(event) {
      this.$axios({
        url: "/user_comments",
        method: "GET"
      }).then(res => {
        console.log("更多跟帖", res.data);
        const { data } = res.data;
        this.CommentList = data;
        event.target.innerHTML = "没有更多了";
      });
    }
  }
};
</script>
<style lang="less" scoped>
.commentPage {
  margin-bottom: 100px;
}
.CommentsList {
  margin: 20px;
  border-bottom: 1px solid #d7d7d7;
  .item {
    font-size: 14px;
    .date {
      color: #888;
    }
    .parent {
      background-color: #e4e4e4;
      margin-top: 20px;
      padding: 20px 14px 16px;
    }
    .content {
      padding: 20px 0 24px;
    }
    .originPost {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 15px;
      .title {
        color: #888;
        padding-right: 15px;
        // 设置单行文本省略号显示
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .iconjiantou1 {
        color: #888;
      }
    }
  }
}
.moreComment {
  text-align: center;
  font-size: 4.444vw;
  color: #888;
}
</style>